<template>
	<view class="city-selector">

		<view @click="open" class="input-item flex align-center">
			<input  v-model="loginForm.username" class="input" type="text" placeholder="请选择所在地区"
				maxlength="30" />
			<view class="cuIcon-triangledownfill icon"></view>
			<view class="mask"></view>
				
		</view>

		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
			<popupDialog titleName="所在地区" @closeDialog="closeDialog">
				<view class="container">
					<view class="city-title">
						<text v-for="(item,i) in cityHeaderList" @click="changeCityTitle(item,i)" :key="i" :class=" cityIndex==i?'active':''">{{item.name}}</text>
					</view>
					<view class="city-main">
						<scroll-view scroll-y :scroll-top="scrollTop" @scroll="scroll" class="indexes" :scroll-into-view="'indexes-'+ listCurID" scroll-with-animation>
							<template v-if="cityList.length>0">
								<view class="item" :id="'indexes-'+ item.letter"  v-for="(item,i) in  cityList" :key="i">
									<view class="item-lable" >
										{{item.letter}}
									</view>
									<view class="item-city" @click="toDetail(itemChild)" v-for="(itemChild,iChild) in  item.data" :key="iChild">
										{{itemChild.split('-')[0]}}
									</view>
						
								</view>								
							</template>
							<template v-else>
								<view class="nothing">
									<image  mode="widthFix" src="@/static/images/nothing.png" alt="" />
									<view class="text-gray">当前列表为空!</view>
								</view>
							</template>
						</scroll-view>
						<view class="right-side">
							<view class="item" @click="clickRightSide(item,i)" :class="rightSideIndex==i?'active':''"  v-for="(item,i) in  cityList" :key="i">
								{{item.letter}}
							</view>
						</view>
					</view>
				</view>
			
			</popupDialog>
		</uni-popup>
	</view>
</template>

<script>
	import regions from '@/utils/regions.json'
	import {groupByFirstLetter} from '@/utils/common.js'

	import popupDialog from '@/components/cu-dialog/popup-dialog.vue'


	export default {
		data() {
			return {
				loginForm: {
					username: ""
				},
				cityList: [],//当前城市列表
				
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				cityHeaderList: [{
						name: "请选择省份",
						code:0
					},
					{
						name: "请选择城市",
						code:0
					},
					{
						name: "请选择区域",
						code:0
					},
				],
				cityIndex: 0,//当前状态
				listCurID: '',//当前选中的大标题名称
				rightSideIndex:0//右侧栏当前选中下标
			}
		},
		components: {
			popupDialog
		},
		methods: {
			//初始化组件
			init(){
				this.cityIndex=0
				this.rightSideIndex=0
				this.listCurID=''
				this.drawCityList()
		
			},
			//打开弹出框
			open() {
				this.init()
				this.$refs.popup.open()
			},
			//到详情页
			toDetail(item){
				
				let [name ,code]=item.split('-')

				//为最后一项不进行渲染
				// if(this.cityIndex<this.cityHeaderList.length-1){}
					this.drawCityList(code,name)
								
				//修改头部
				this.updateTitle(code,name)
				
				//如果是最后一项返回结果
				if(!this.cityList||this.cityList.length==0) this.reset() ;
			},
			//重新绘制下拉列表
			drawCityList(code,name){
				if(code){
					let cityList;
					for (const region of regions) {
					  if (region.code == code) {
					    cityList = region.cities;
					    break;
					  }
					  
					  if (region.cities) {
					    const foundCity = region.cities.find(city => city.code == code);
					    if (foundCity) {
					      cityList = foundCity.districts;
					      break;
					    }
					  }
					}

					this.cityList=cityList?groupByFirstLetter(cityList.map(item=>item.name+'-'+item.code)):[]						
					
				}else{
					this.cityList= groupByFirstLetter(regions.map(item=>item.name+'-'+item.code)) 
					
				}
				
			},
			//修改表头
			updateTitle(code,name){
				if(code==0)return
				//修改标题，和坐标
				this.cityHeaderList[this.cityIndex].name=name
				this.cityHeaderList[this.cityIndex].code=code
				let initCityHeaderList=this.$options.data().cityHeaderList
				//将后面的默认初始化
				this.cityHeaderList=this.cityHeaderList.map((item,i)=>{
					if(i>this.cityIndex){
						return initCityHeaderList[i]
					}
					return item
				})
				
				//最高级不进行操作
				if(this.cityIndex<2){
					this.cityIndex++
				}
			},
			//点击选择标题
			changeCityTitle(item,i){
				let {code ,name}=item
				// 未选择无法选中
				if(code==0)return
				this.cityIndex=i //修改状态
				let oldStatus= this.cityHeaderList[i-1]
				
				if(oldStatus){
					
					this.drawCityList( oldStatus.code,oldStatus.name)//返回上一级的列表
				}else{
					this.drawCityList()
				}
				
				
				
			},
			//已经是最后一项进行返回出结果
			reset(){
				let cityHeaderListName=''
				
				for (let [key,cityHeaderItem] of this.cityHeaderList.entries()) {
					if(cityHeaderItem.code!=0){
						if(key!=0)cityHeaderListName+='/';
						cityHeaderListName+=cityHeaderItem.name;
						
					}
				}
				this.loginForm.username=cityHeaderListName
				this.$emit('update',this.cityHeaderList)
				this.closeDialog();
			},
			//关闭弹出框
			closeDialog() {
				this.$refs.popup.close()
			},
			scroll(e) {	
				this.old.scrollTop = e.detail.scrollTop
			},
			//点击右侧栏
			clickRightSide(item,i){

				this.rightSideIndex=i
				this.listCurID=item.letter
			}

		}

	}
</script>

<style lang="scss" scoped>
	.city-selector {
		height: 100%;
		.input-item {
			margin: 20rpx auto;
			position: relative;
			padding: 0 40rpx;
			background-color: #F4F6FA;
			height: 100rpx;
			border-radius: 100rpx;
			// width: 620rpx;
			.icon {
				font-size: 44rpx;
				color: #333;
			}

			.input {
				width: 100%;
				font-size: 28rpx;
				line-height: 40rpx;
				text-align: left;
			}
			.mask{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

		}
		.container{
			display: flex;
			flex-direction: column;
			height: 100%;
			.city-title {
				text-align: left;
				color: #C5C5C5;
				height: 20rpx;
				text {
					margin-right: 40rpx;
				}
				.active {
					color: #0973F4;
				}
			}

			.city-main {
				margin-top: 20rpx;
				text-align: left;
				flex: 1;
				overflow: scroll;
				padding: 20rpx 0;
				position: relative;
				.indexes {
					height:100% ;
					.item {
						.item-lable {
							color: #A5A5A5;
							margin-top: 28rpx;
							margin-bottom: 24rpx;
						}
						.item-city{
							color: #3D3D3D;
						}
						.item-city+.item-city {
							margin-top: 40rpx;
						}
					}
					.nothing{
						text-align:  center;
						
						image{
							margin-top: 220rpx;
							width: 560rpx;
						}
						
					}
				}
				.right-side{
					position: absolute;
					right: 10rpx;
					top: 52rpx;
					.item{
						color: #3D3D3D;
						font-size: 20rpx;
						line-height: 36rpx;
						text-align: center;
						width: 36rpx;
						height: 36rpx;
						// padding: 12rpx;
						margin-bottom: 8rpx;
					}
					.active{
						border-radius: 50%;
						background-color: #0973F4;
						color: #fff;
					}
				}
			}			
			
		}


	}
</style>